<template>
  <div
    class="herin-select-options"
    :style="{
      width: width*zoomFactor + 'px',
      top: height*zoomFactor + 5 + 'px',
      height: optionsHeight
    }"
    @mousedown="handleClickOption"
  >
    <div
      v-for="item in options"
      :key="item.label + item.value"
      class="herin-select-options-item"
      :class="currentValue === item.value ? 'active' : ''"
      :style="{ height: height*zoomFactor + 'px', lineHeight: height*zoomFactor + 'px' }"
      :title="item.label"
    >
      {{ item.label }}
    </div>
    <div v-if="options.length === 0" @click.stop="optionsShow = false">
      无数据
    </div>
  </div>
</template>

<script>
import vuePopper from '@/utils/vuePopper.js';

export default {
  name: 'SelectOption',
  mixins: [vuePopper],
  props: {
    zoomFactor: {
      type: Number,
      default: 1
    },
    width: {
      type: Number,
      default: 80
    },
    height: {
      type: Number,
      default: 24
    },
    optionsHeight: {
      type: String,
      default: () => '',
      require: true
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    currentValue: {
      type: String,
      default: () => '',
      require: true
    }
  },
  data() {
    return {
    };
  },
  mounted() {
    this.referenceElm = this.$parent.$refs.reference;
    this.popperElm = this.$el;
    this.updatePopper();
  },
  methods: {
    // 选项的点击函数
    handleClickOption(val) {
      const label = val.target.innerText;
      const option = this.options.filter(item => item.label === label)[0];
      if (option) {
        // 关闭options展示 并向父组件传值
        this.$emit('onPicker', option.value);
      }
    }
  }
};
</script>

<style lang="scss">
  .herin-select-options{
    overflow-y: auto;
    padding: .25rem 0;
    margin-top: .5rem;
    position: absolute;
    top: 1.8125rem;
    border: .0625rem solid rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    width: 5rem;
    text-align: center;
    color: #d9d9d9;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: .75rem;
    z-index: 1000;
    font-family: Helvetica, 'PingFang-SC-Medium';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    &-item {
      &:hover { cursor: pointer }
      height: 1.5rem;
      line-height: 1.5rem;
      color: #d9d9d9;
      cursor: pointer;
      padding: 0 0.3125rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
      &.active {
        color: rgba(46, 214, 230, 1);
        background-color: rgba(46, 214, 230, 0.2);
      }
    }
    &-item:hover {
      color: rgba(46, 214, 230, 1);
      background-color: rgba(46, 214, 230, 0.2);
    }
  }
</style>
